<template>
    <li
        @mouseenter="hoverItem"
        @click.stop="selectOptionClick"
        class="at-select-dropdown__item"
        v-show="visible"
        :class="{
            'selected': itemSelected,
            'is-disabled': disabled || groupDisabled || limitReached,
            'hover': parent.hoverIndex === index
        }">
        <slot>
            <span>{{ currentLabel }}</span>
            <i class='at-select-dropdown__item-selected'></i>
        </slot>
    </li>
</template>

<script type="text/babel">
    import Emitter from '../../common/mixins/emitter';
    import { getValueByPath } from '../../common/utils/util';

    export default {
        mixins: [Emitter],

        name: 'at-option',

        componentName: 'AtOption',

        props: {
            /**
                *@type {String}:value 绑定值
                */
            value: {
                required: true
            },
            /**
                *@type {String, Number}:label 选项的标签，若不设置则默认与 value 相同
                */
            label: [String, Number],
            /**
                *@type {Boolean}:created 
                */
            created: Boolean,
            /**
                *@type {Boolean}:disabled 是否禁用该选项
                */
            disabled: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {
                index: -1,
                groupDisabled: false,
                visible: true,
                hitState: false
            };
        },

        computed: {
            isObject() {
                return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]';
            },

            currentLabel() {
                return this.label || (this.isObject ? '' : this.value);
            },

            currentValue() {
                return this.value || this.label || '';
            },

            parent() {
                let result = this.$parent;
                while (!result.isSelect) {
                  result = result.$parent;
                }
                return result;
            },

            itemSelected() {
                if (!this.parent.multiple) {
                  return this.isEqual(this.value, this.parent.value);
                } else {
                  return this.contains(this.parent.value, this.value);
                }
            },

            limitReached() {
                if (this.parent.multiple) {
                  return !this.itemSelected &&
                    this.parent.value.length >= this.parent.multipleLimit &&
                    this.parent.multipleLimit > 0;
                } else {
                  return false;
                }
            }
        },

        watch: {
            currentLabel() {
                if (!this.created && !this.parent.remote) this.dispatch('AtSelect', 'setSelected');
            },
            value() {
                if (!this.created && !this.parent.remote) this.dispatch('AtSelect', 'setSelected');
            }
        },

        methods: {
            isEqual(a, b) {
                if (!this.isObject) {
                    return a === b;
                } else {
                    const valueKey = this.parent.valueKey;
                    return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
                }
            },

            contains(arr = [], target) {
                if (!this.isObject) {
                    return arr.indexOf(target) > -1;
                } else {
                    const valueKey = this.parent.valueKey;
                    return arr.some(item => {
                          return getValueByPath(item, valueKey) ===getValueByPath(target, valueKey);
                      });
                }
            },

            handleGroupDisabled(val) {
                this.groupDisabled = val;
            },

            hoverItem() {
                if (!this.disabled && !this.groupDisabled) {
                    this.parent.hoverIndex = this.parent.options.indexOf(this);
                }
            },

            selectOptionClick() {
                if (this.disabled !== true && this.groupDisabled !== true) {
                    this.dispatch('AtSelect', 'handleOptionClick', this);
                }
            },

            queryChange(query) {
              // query 里如果有正则中的特殊字符，需要先将这些字符转义
                let parsedQuery = String(query).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
                this.visible = new RegExp(parsedQuery, 'i').test(this.currentLabel) || this.created;
                if (!this.visible) {
                    this.parent.filteredOptionsCount--;
                }
            },

            resetIndex() {
                this.$nextTick(() => {
                    this.index = this.parent.options.indexOf(this);
                });
            }
        },

        created() {
            this.parent.options.push(this);
            this.parent.cachedOptions.push(this);
            this.parent.optionsCount++;
            this.parent.filteredOptionsCount++;
            this.index = this.parent.options.indexOf(this);

            this.$on('queryChange', this.queryChange);
            this.$on('handleGroupDisabled', this.handleGroupDisabled);
            this.$on('resetIndex', this.resetIndex);
        },

        beforeDestroy() {
            this.dispatch('AtSelect', 'onOptionDestroy', this);
        }
    };
</script>
<style> 
/*.at-select-dropdown__item {
    font-size: 14px;
    padding: 8px 10px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #48576a;
    height: 36px;
    line-height: 1.5;
    box-sizing: border-box;
    cursor: pointer
}
.at-select-dropdown__item.selected {
    color: #fff;
    background-color: #20a0ff
}
.at-select-dropdown__item.selected.hover {
    background-color: #1c8de0
}
.at-select-dropdown__item span {
    line-height: 1.5!important
}
.at-select-dropdown__item.is-disabled {
    color: #bfcbd9;
    cursor: not-allowed
}
.at-select-dropdown__item.is-disabled:hover {
    background-color: #fff
}
*/


</style>